<template>
  <div class="app-container">
    <!--统计组件-->
    <panel-group :info="info"/>

    <!--搜索区域-->
    <el-row style="margin-bottom: 30px">
      <el-col :span="3">
        <el-input v-model="searchQuery.keyword" style="width:95%" placeholder="客服/服务星名称"/>
      </el-col>

      <el-col :span="3">
        <el-select v-model="searchQuery.kfRemark" placeholder="客服标记" style="width:95%">
          <el-option label="全部" value/>
          <el-option label="已通过" value="P"/>
          <el-option label="已加" value="Y"/>
          <el-option label="未加" value="N"/>
        </el-select>
      </el-col>

      <el-col :span="3">
        <el-select v-model="searchQuery.serviceStarLevel" placeholder="服务星等级" style="width:95%">
          <el-option label="全部" value/>
          <el-option v-for="item in serviceStarLevelList" :key="item.val" :label="item.text" :value="item.val"/>
        </el-select>
      </el-col>

      <el-col :span="5">
        <el-date-picker
          v-model="time"
          :picker-options="pickerOptions"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          style="width:95%"
        />
      </el-col>
      <el-col :span="1.5">
        <el-button
          style="width:98%"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="searchFrom"
        >{{ $t('table.search') }}</el-button>
      </el-col>
    </el-row>

    <!--表格区域-->
    <template>
      <el-table
        :data="tableData"
        border
        height="500"
        stripe
        style="width: 100%; background-color: #fff"
      >
        <el-table-column prop="serviceStarId" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.kfRemark !== 'P'"
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="toPass(scope.row.serviceStarId)"
            >通过</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="serviceStarNickname" label="服务星昵称" width="150"/>
        <el-table-column prop="serviceStarPhone" label="服务星手机" width="150"/>
        <el-table-column prop="serviceStarRealname" label="真实姓名" width="150"/>
        <el-table-column prop="serviceStarLevel" label="等级" width="100">
          <!-- <template slot-scope="scope">
            <svg-icon v-for="n in scope.row.serviceStarLevel"  icon-class="star" class="meta-item__icon"/>
          </template>-->
        </el-table-column>
        <el-table-column prop="nickname" label="专属客服" width="100"/>
        <el-table-column prop="kfRemark" label="客服标记" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.kfRemark === 'Y'" :type="scope.row.kfRemark | remarkFilter">已加</el-tag>
            <el-tag v-if="scope.row.kfRemark === 'N'" :type="scope.row.kfRemark | remarkFilter">未加</el-tag>
            <el-tag v-if="scope.row.kfRemark === 'P'" :type="scope.row.kfRemark | remarkFilter">通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="starAchevement" label="星业绩" width="150">
          <template slot-scope="scope">¥{{ scope.row.starAchevement | toThousandFilter }}</template>
        </el-table-column>
        <el-table-column prop="marketAchevement" label="分销业绩" width="150">
          <template slot-scope="scope">¥{{ scope.row.marketAchevement | toThousandFilter }}</template>
        </el-table-column>
        <el-table-column prop="expenseAchevement" label="消费业绩" width="150">
          <template slot-scope="scope">¥{{ scope.row.expenseAchevement | toThousandFilter }}</template>
        </el-table-column>
        <el-table-column prop="orderAchevement" label="工单业绩" width="150">
          <template slot-scope="scope">¥{{ scope.row.orderAchevement | toThousandFilter }}</template>
        </el-table-column>
        <el-table-column prop="annualFee" label="是否交年费" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.annualFee === 'Y'" :type="scope.row.annualFee | statusFilter">是</el-tag>
            <el-tag v-if="scope.row.annualFee !== 'Y'" :type="scope.row.annualFee | statusFilter">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="joinDatetime" label="加入时间" width="120">
          <template slot-scope="scope">
            <span
              v-if="scope.row.joinDatetime"
            >{{ scope.row.joinDatetime | parseTime('{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createDatetime" label="注册时间" width="120">
          <template slot-scope="scope">
            <span
              v-if="scope.row.createDatetime"
            >{{ scope.row.createDatetime | parseTime('{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!--分页-->
    <div class="pagination-container">
      <el-pagination
        :current-page="searchQuery.page"
        :page-sizes="[10,20,30, 50]"
        :page-size="searchQuery.pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { parseTime, pickerOptions } from '@/utils'
import PanelGroup from './panelGroup'
import {
  selectByAdvancedSearch,
  kfPass,
  selectStatistical
} from '@/api/serviceStar'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        Y: 'success',
        N: 'danger'
      }
      return statusMap[status]
    },
    remarkFilter(status) {
      const statusMap = {
        Y: 'pending',
        P: 'success',
        N: 'danger'
      }
      return statusMap[status]
    }
  },
  components: {
    PanelGroup
  },
  data() {
    return {
      info: {
        myCount: 0,
        myNoJoinCount: 0,
        all: 0,
        allNoJoinCount: 0
      },
      serviceStarLevelList: [
        { text: '0星', val: '0星' },
        { text: '1星', val: '1星' },
        { text: '2星', val: '2星' },
        { text: '3星', val: '3星' },
        { text: '4星', val: '4星' },
        { text: '5星', val: '5星' },
        { text: '合伙人', val: '合伙人' },
        { text: '加盟商', val: '加盟商' }],
      tableData: [],
      pickerOptions: { shortcuts: pickerOptions },
      searchQuery: {
        pageSize: 10,
        pageNumber: 1,
        page: 1,
        keyword: '',
        starTime: '',
        endTime: '',
        kfRemark: '',
        serviceStarLevel: ''
      },
      total: 0,
      time: ''
    }
  },
  created() {
    this.getList()
    this.getStatistical()
  },
  methods: {
    // 调用api接口
    getStatistical() {
      var data = { a: 1 }
      selectStatistical(data).then(response => {
        debugger
        if (response.data.status === 'success') {
          this.info.myCount = response.data.data.myCount
          this.info.myNoJoinCount = response.data.data.myNoJoinCount
          this.info.all = response.data.data.all
          this.info.allNoJoinCount = response.data.data.allNoJoinCount
        }
      })
    },
    // 搜索
    searchFrom() {
      if (this.time !== null && this.time !== '') {
        this.searchQuery.starTime = parseTime(
          this.time[0],
          '{y}-{m}-{d} {h}:{i}'
        )
        this.searchQuery.endTime = parseTime(
          this.time[1],
          '{y}-{m}-{d} {h}:{i}'
        )
      } else {
        this.searchQuery.starTime = null
        this.searchQuery.endTime = null
      }
      this.searchQuery.page = 1
      this.getList()
    },
    // 客服通过
    toPass(workid) {
      kfPass({ starId: workid }).then(response => {
        if (response.data.status === 'success') {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getList()
          this.getStatistical()
        } else {
          this.$message(response.data.messge)
        }
      })
    },
    // 查询列表
    getList() {
      this.searchQuery.pageNumber =
        (this.searchQuery.page - 1) * this.searchQuery.pageSize
      selectByAdvancedSearch(this.searchQuery).then(response => {
        if (response.data.status === 'success') {
          this.tableData = response.data.data.list
          this.total = response.data.data.total
        }
      })
    },
    handleSizeChange(val) {
      this.searchQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.searchQuery.page = val
      this.getList()
    }
  }
}
</script>
